<template>
  <div id="reactive">
    <div>{{ myre }}</div>
    <button @click="add">add</button>
  </div>
</template>


<script setup lang="ts">
import { reactive, readonly, shallowReactive } from 'vue'

// reactive限制了只接收对象类型的数据
// 绑定复杂的数据类型推荐使用reactive
let myre = reactive([1, 2, 3])
const add = () => {
  myre[0] = 2
  console.log(myre);
}

//  readonly:定义一个只读的数据
const aa = readonly({
  name: '我是不能修改的'
})

// shallowReactive：仅仅是最外层是响应式的，不能更改更深层的数据
let message = shallowReactive({
  name: 'shall',
  num: [1, 2, 3]
})

</script>

<style lang="less">
</style>
